<template>
  <div>
          <div class="box2">
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">【题型】：{{ box }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">【编号】：{{ list.id }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【难度】：{{ difficulty }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">【标签】：{{ list.tags }}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">【学科】：{{ list.subjectName }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">【目录】：{{ list.directoryName }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【方向】：{{ list.direction }}</div></el-col>
        </el-row>
        <el-divider></el-divider>
        <div>【题干】：</div>
        <p class="text" v-html="list.question"></p>
        <div class="flexbox" v-if="list.questionType == 1">
        <p class="ma10">{{ box }} 选项：（以下选中的选项为正确答案）</p>
          <span v-for="item in list.options" :key="item.id" class="maginbox">
            <input type="radio" :checked="item.isRight == 1" :value="item.title" :disabled="item.isRight == 0" /><span :class="{highlight: item.isRight == 1}">{{ item.title }}</span>
          </span>
        </div>
        <div class="flexbox" v-if="list.questionType == 2">
        <p class="ma10">{{ box }} 选项：（以下选中的选项为正确答案）</p>
          <span v-for="item in list.options" :key="item.id" class="maginbox">
            <input type="checkbox" :checked="item.isRight == 1" :value="item.title" :disabled="item.isRight == 0" /><span :class="{highlight: item.isRight == 1}">{{ item.title }}</span>
          </span>
        </div>
        <el-divider></el-divider>
        <span>【参考答案】：</span><el-button type="danger" @click="isVideoShow = true">视频答案预览</el-button>
        <div class="videobox" v-if="isVideoShow">
          <video width="400" height="300" controls autoplay :src="list.videoURL"></video>
        </div>
        <el-divider></el-divider>
        <div class="nnn">
          <span>【答案解析】：</span><span v-html="list.answer"></span>
        </div>
        <el-divider></el-divider>
        <span>【题目备注】：</span><span v-html="list.remarks"></span>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="box1">
          <el-button type="primary" @click="$emit('close')">关闭</el-button>
        </div>
      </span>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'RandomDialog',
  data () {
    return {
      list: {},
      isVideoShow: false
    }
  },
  computed: {
    box () {
      return this.list.questionType === '1' ? '单选题' : this.list.questionType === '2' ? '多选题' : '简答题'
    },
    difficulty () {
      return this.list.difficulty === '1' ? '简单' : this.list.difficulty === '2' ? '一般' : '困难'
    }
  },
  props: {
    questionBankId: {
      type: [Number, String],
      require: true
    }
  },
  created () {
    this.getQuestionBank()
  },
  methods: {
    async getQuestionBank () {
      const { data } = await detail({
        id: this.questionBankId
      })
      this.list = data
    }
  }
}
</script>

<style lang="scss" scoped>
.box1 {
  width: 92%;
  height: 40px;
  position: relative;
  bottom: 0px;
  .el-button--primary {
    width: 70px;
    height: 36px;
    float: right;
  }
}
.box2 {
  padding: 30px 20px;
  .text {
    color: blue;
    margin-left: 10px;
    ::v-deep p {
      margin-bottom: 0 !important;
    }
  }
}
.flexbox {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  input {
    padding: 8px 0;
  }
}
.ma10 {
  margin-top: 0px;
  margin-bottom: 15px;
  margin-left: 0px;
  ::v-deep span{
    margin-bottom: 15px;
  }
}
.el-divider--horizontal {
  margin: 10px 0;
}
.nnn{
  display: flex;
  align-items: center;
}
.maginbox{
  display: block;
  margin: 8px 0;
  flex-shrink: inherit;
  input {
    margin-right: 10px;
  }
  span {
    padding-bottom: 5px;
  }
}
.highlight {
  color: #409eff;
}
.videobox {
  width: 400px;
  height: 300px;
}
.bg-purple{
  padding-bottom: 20px ;
}
</style>
